<template>
    <div class="maincontent">
        <el-form :inline="true" label-position="left" :model="form" label-width="80px">
            <div class="maintitle">踏勘选址</div>
            <div class="formcontent">
                <div>
                    
                    <el-form-item label="踏勘时间 从" label-width="100px">
                        <el-date-picker
                            v-model="form.reconnaissanceStartTime"
                            type="date"
                            placeholder="开始日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="至" label-width="26px" >
                        <el-date-picker
                            v-model="form.reconnaissanceEndTime"
                            type="date"
                            placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="踏勘人员" >
                        <el-input v-model="form.reconnaissancepersons" style="width:200px;">
                        </el-input>
                    </el-form-item>
                </div>
            </div>
            <div>
                <el-form-item label="踏勘选址依据" label-width="100px">
                    <el-input style="width:774px;" :rows="3" type="textarea" v-model="form.thebasis"></el-input>
                </el-form-item>
            </div>
            <div>
                <el-form-item label-width="420px" label="符合土地利用总体规划、农村土地整治规划、农村产业发展规划等">
                    <el-radio-group v-model="form.conditions1">
                        <el-radio label="是"></el-radio>
                        <el-radio label="否"></el-radio>
                    </el-radio-group>
                </el-form-item>
            </div>
            <div>
                <el-form-item label-width="420px" label="不属于退耕还林还草区域，严禁毁林开垦" style="text-align:left;">
                    <el-radio-group v-model="form.conditions2">
                        <el-radio label="是"></el-radio>
                        <el-radio label="否"></el-radio>
                    </el-radio-group>
                </el-form-item>
            </div>
            <div>
                <el-form-item label-width="420px" label="项目区群众有实施意愿，乡镇、村社具备项目实施的组织协调能力">
                    <el-radio-group v-model="form.conditions3">
                        <el-radio label="是"></el-radio>
                        <el-radio label="否"></el-radio>
                    </el-radio-group>
                </el-form-item>
            </div>
            <div>
                <el-form-item label-width="420px" label="是否在25°以上不利于管护利用的陡坡开垦耕地">
                    <el-radio-group v-model="form.conditions4">
                        <el-radio label="是"></el-radio>
                        <el-radio label="否"></el-radio>
                    </el-radio-group>
                </el-form-item>
            </div>
            <div>
                <el-form-item label-width="820px" label="项目实施范围红线面积原则上不超过600公顷，农用地面积比例不低于红线面积的60%，建设用地面积比例不超过红线面积的10%">
                    <el-radio-group v-model="form.conditions5">
                        <el-radio label="是"></el-radio>
                        <el-radio label="否"></el-radio>
                    </el-radio-group>
                </el-form-item>
            </div>
            <div>
                <el-form-item label-width="100px" label="踏勘选址报告">
                    <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :file-list="fileList"
                        :on-success="getreport"
                        >
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
            </div>
            <div class="maintitle" style="margin-top:40px;">可研报告编制</div>
            <div class="formcontent">
                <el-form-item label="编制日期" style="margin-right:60px;">
                    <el-date-picker
                        v-model="form.prepareDate"
                        type="date"
                        placeholder="编制日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="可研究性报告模板" label-width="125px" style="margin-right:60px;">
                    <el-button @click="onSubmit" size="small">下载</el-button>
                </el-form-item>
                <el-form-item label-width="100px" label="可研究性报告">
                    <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :file-list="fileList"
                        :on-success="getreport"
                        >
                        <el-button size="small" type="primary">上传</el-button>
                    </el-upload>
                </el-form-item> 
            </div>
            <div class="maintitle" style="margin-top:40px;">各大工程投资情况</div>
            <div style="display: flex;-webkit-box-align: center;margin-top:20px;">
                <div class="secondtitle">工程施工费</div>
                <div style="-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;">
                    <el-form-item label="田间道路工程费" label-width="125px" style="margin-right:60px;">
                        <el-input v-model="form.constructionCost.fieldRoad" style="width:200px;">
                            <template slot="append">万元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="土地平整工程费" label-width="125px" style="margin-right:60px;">
                        <el-input v-model="form.constructionCost.landLeveling" style="width:200px;">
                            <template slot="append">万元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="农田水利工程费" label-width="125px" style="margin-right:60px;">
                        <el-input v-model="form.constructionCost.waterConservancy" style="width:200px;">
                            <template slot="append">万元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="生态保护工程费" label-width="125px" style="margin-right:60px;">
                        <el-input v-model="form.constructionCost.ecologicalProtection" style="width:200px;">
                            <template slot="append">万元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="其他施工费" label-width="125px">
                        <el-input v-model="form.constructionCost.other" style="width:200px;">
                            <template slot="append">万元</template>
                        </el-input>
                    </el-form-item>
                </div>
            </div>
            <div style="display: flex;-webkit-box-align: center;">
                <div class="secondtitle" style="margin-right:34px;">其他费用</div>
                <div style="-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;">
                    <el-form-item label="设备购置费" label-width="125px" style="margin-right:60px;">
                        <el-input style="width:200px;">
                            <template slot="append">万元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="不可预见费用" label-width="125px" style="margin-right:60px;">
                        <el-input style="width:200px;">
                            <template slot="append">万元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="建设亩均投资" label-width="125px" style="margin-right:60px;">
                        <el-input style="width:200px;">
                            <template slot="append">万元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="新增耕地亩均投资" label-width="125px" style="margin-right:60px;">
                        <el-input style="width:200px;">
                            <template slot="append">万元</template>
                        </el-input>
                    </el-form-item>
                </div>
            </div>
            <div style="display: flex;-webkit-box-align: center;">
                <div style="font-size:16px;font-family:PingFang SC;font-weight:bold;line-height:22px;color:#333333;">工程总投资</div>
                <div style="-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;margin-left:30px;font-size:16px;font-family:PingFang SC;font-weight:bold;line-height:22px;color:#4d4d4d;">
                    1125.00<span style="font-size:13px;font-family:PingFang SC;font-weight:500;line-height:18px;margin-left:4px;color:#4c4c4c;">万元</span>
                </div>
            </div>
            <div class="maintitle" style="margin-top:40px;">建设信息</div>
            <div class="formcontent">
                <el-form-item label="预计建设总规模" label-width="195px" style="margin-right:40px;">
                    <el-input style="width:200px;">
                        <template slot="append">公顷</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="预计整理规模" label-width="195px" style="margin-right:40px;">
                    <el-input style="width:200px;">
                        <template slot="append">公顷</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="预计开发规模" label-width="195px" style="margin-right:40px;">
                    <el-input style="width:200px;">
                        <template slot="append">公顷</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="预计复垦规模" label-width="195px" style="margin-right:40px;">
                    <el-input style="width:200px;">
                        <template slot="append">公顷</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="预计新增耕地总面积" label-width="195px" style="margin-right:40px;">
                    <el-input style="width:200px;">
                        <template slot="append">公顷</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="预计新增整理耕地面积" label-width="195px" style="margin-right:40px;">
                    <el-input style="width:200px;">
                        <template slot="append">公顷</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="预计新增开发耕地面积" label-width="195px" style="margin-right:40px;">
                    <el-input style="width:200px;">
                        <template slot="append">公顷</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="预计新增复垦耕地面积" label-width="195px" style="margin-right:40px;">
                    <el-input style="width:200px;">
                        <template slot="append">公顷</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="预计基本农田整理规模" label-width="195px" style="margin-right:40px;">
                    <el-input style="width:200px;">
                        <template slot="append">公顷</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="预计可用与占补平衡面积" label-width="195px" style="margin-right:40px;">
                    <el-input style="width:200px;">
                        <template slot="append">公顷</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="预计建成高标准基本农田规模" label-width="195px" style="margin-right:40px;">
                    <el-input style="width:200px;">
                        <template slot="append">公顷</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="灾毁耕地面积" label-width="195px" style="margin-right:40px;">
                    <el-input style="width:200px;">
                        <template slot="append">公顷</template>
                    </el-input>
                </el-form-item>
            </div>
            <div class="maintitle" style="line-height:40px;">
                主要建设内容
                <el-form-item style="margin-right:24px;margin-left:30px;">
                    <el-button @click="onSubmit" size="small">工程量导入</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="onSubmit" size="small">模板下载</el-button>
                </el-form-item>
            </div>
            <div>
                <el-table
                    :data="tableData"
                    style="width: 100%">
                    <el-table-column
                        prop="date"
                        label="序号"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="工程类型"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        label="工程名称">
                    </el-table-column>
                    <el-table-column
                        prop="date"
                        label="规格"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="数量"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        label="备注">
                    </el-table-column>
                </el-table>
            </div>
            <div style="margin-top:110px;">
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button>取消</el-button>
                </el-form-item>  
            </div>
            
        </el-form>
        
    </div>
</template>

<script>

export default {
    data() {
        return {
            form:{
                reconnaissanceStartTime:'',
                reconnaissanceEndTime:'',
                reconnaissancepersons:'',
                thebasis:'',
                conditions1:'',
                conditions2:'',
                conditions3:'',
                conditions4:'',
                conditions5:'',
                prepareDate:'',
                constructionCost:{
                    fieldRoad:"",
                    landLeveling:"",
                    waterConservancy:"",
                    ecologicalProtection:"",
                    other:""
                },
            },
            fileList:[],
            tableData:[]
        };
    },
    
    created() {
        
    },
    methods: {
        onSubmit(){

        },
        getreport(response, file, fileList){
            this.fileList = [];
            this.fileList.push(file)
        }
    }
};
</script>

<style lang="scss" scoped>
    .maincontent{
        padding: 10px 35px;
        .maintitle{
            font-size:18px;
            font-family:PingFang SC;
            font-weight:bold;
            line-height:25px;
            color: #4d4d4d;
        }
        .formcontent{
            margin-top: 30px;
        }
        .secondtitle{
            font-size:14px;
            font-family:PingFang SC;
            font-weight:500;
            line-height:20px;
            margin-right:20px;
            line-height:38px;
        }
    }
</style>
 